<template>
  <div class="">
    <el-form ref="sm4" :model="pluginData" label-width="150px">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="pluginData.name"/>
      </el-form-item>
      <el-form-item label="操作" prop="operationType">
        <el-select v-model="pluginData.operationType" style="width:100%">
          <el-option
            key="Y"
            label="加密"
            value="Y"
          />
          <el-option
            key="N"
            label="解密"
            value="N"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="输入字段" prop="inputField">
        <el-row>
          <el-select v-model="pluginData.inputField" placeholder="请选择" style="width: 300px;" clearable filterable>
            <el-option
              v-for="item in fieldOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
          <!--<el-checkbox v-model="pluginData.outputAsHex" style="margin: 0 20px;" true-label="Y" false-label= "N">16进制字符串</el-checkbox>-->
        </el-row>
      </el-form-item>
    </el-form>
    <div class="el-dialog__footer">
      <span class="dialog-footer">
        <el-button
          icon="el-icon-back"
          @click="cancel"
        >取消
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-check"
          @click="handleSaveData()"
        >确定
        </el-button>
      </span>
    </div>
  </div>
</template>

<script>
/* eslint-disable new-cap */
import API from '../../../../../api/index'
import mxgraph from '../../../../../graph/VueMxGraphLoader'
import dictSelect from '../../../std/dict-select.vue'
import xmlToFlinkJson from '../../../../../utils/xmlToFlinkJson'
const {
  mxUtils,
  mxCodec
} = mxgraph
export default {
  name: 'Sm3',
  components: {
    dictSelect
  },
  props: {
    name: String
  },
  data() {
    return {
      graph: null,
      pluginData: {
        name: '加密（普通）',
        type: 'EncryptionMasking',
        fields: [],
        secretKeyInField: 'N',
        operationType: '', // 操作类型 加密0 / 解密 1
        inputField: '',
        outputField: '',
        outputAsHex: 'Y' // 16进制格式
      },
      temp: {
        name: '加密（普通）',
        type: 'EncryptionMasking',
        fields: [],
        secretKeyInField: 'N',
        operationType: '', // 操作类型 加密0 / 解密 1
        inputField: '',
        outputField: '',
        outputAsHex: 'Y' // 16进制格式
      },
      fieldOptions: []
    }
  },
  mounted() {

  },
  methods: {
    loadData(data) {
      if (data) {
        this.$forceUpdate()
        this.pluginData = Object.assign({}, data)
        this.pluginData.outputAsHex = 'Y'
        this.temp = JSON.parse(JSON.stringify(data))
      }
    },
    // 保存表单数据
    handleSaveData() {
      if (this.pluginData.name) {
        this.$emit('savePluginData', this.pluginData)
      } else {
        this.$message({
          message: '步骤名称必填',
          type: 'warning'
        })
      }
    },
    setGraph(val) {
      this.graph = val
      // this.getStreamField()
      this.getField()
    },
    cancel() {
      this.$emit('cancel')
    },
    // 重置表单数据
    resetFormData(stepname) {
      this.$forceUpdate()
      this.$refs['sm4'].resetFields()
      this.$deepCopy(this.pluginData, this.temp)
      // this.pluginData = JSON.parse(JSON.stringify(this.temp))
      this.pluginData['name'] = stepname
    },
    async getStreamField() {
      const value = await this.getXml()
      await API.trans.flinkInputFields(value, { 'stepName': this.pluginData.name }).then(res => {
        this.$set(this, 'fieldOptions', res.data.data.data.fields)
      })
      return API.trans.flinkInputFields(value, { 'stepName': this.pluginData.name })
    },
    async getField() {
      const self = this
      self.pluginData.fields = []
      const streamFields = await this.getStreamField()
      // streamFields.data.data.data.fields.forEach(element => {
      //
      // })
      var tempFileds = []
      const obj = {}
      obj.column_name = this.pluginData.inputField
      obj['encrypt'] = this.pluginData.operationType
      tempFileds.push(obj)
      self.$set(self.pluginData, 'fields', tempFileds)
    },
    getXml() {
      this.saveTempPluginData(this.pluginData)
      const graph = this.graph
      const enc = new mxCodec(mxUtils.createXmlDocument())
      const node = enc.encode(graph.getModel())
      const queryParJson = xmlToFlinkJson.xmlToFlinkModels(node)
      queryParJson.models.model['step_name'] = this.pluginData.name
      queryParJson.models.model['step_type'] = 'PREV'

      return queryParJson
    },
    saveTempPluginData(formData) {
      this.$emit('saveTempPluginData', formData)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

.el-table-add-row {
  border: 1px dashed #c1c1cd;
  margin-left: 20px;
  border-radius: 3px;
  cursor: pointer;
  justify-content: center;
  display: flex;
  width: 200px;
  line-height: 34px;
}
.box{
  position:relative;
  border:1px solid #dcdfe6;
  padding:30px 5px 10px 5px;
}
.box::before{
  content:attr(title);
  position:absolute;
  top: 0%;
  left:10%;
  transform:translateX(-50%);
  -webkit-transform:translate(-50%,-50%);
  padding:0px 10px;
  background-color:#fff;
}
</style>
